<template>
	<div>
		<div id="home-footer">
			<div class="bottomBox">
				<section class="bottomBoxOne">
					<div class="boxTop">
						<ul class="boxTopL">
							<li>
								<h3 class="boxTopLItOne">{{$t('h_bottom.title[0]')}}</h3>
								<a class="boxTopLIt" @click="golive">{{$t('h_bottom.title[1]')}}</a>
								<a class="boxTopLIt" @click="openRenwU">{{$t('h_bottom.title[2]')}}</a>
								<a class="boxTopLIt" @click="goFanshui">{{$t('h_bottom.title[3]')}}</a>
								<a class="boxTopLIt" @click="goreward">{{$t('h_bottom.title[4]')}}</a>
								<!-- <a class="boxTopLIt">VIP</a> -->
								<a class="boxTopLIt" @click="gopromotion">{{$t('h_bottom.title[5]')}}</a>
							</li>
							<li>
								<h3 class="boxTopLItOne">{{$t('h_bottom.title[6]')}}</h3>
								<a class="boxTopLIt" v-for="(item,index) in navs" :key="index" @click="changeNav(item)">{{item.name}}</a>
							</li>
							<li>
								<h3 class="boxTopLItOne">{{$t('h_bottom.title[7]')}}</h3>
								<a class="boxTopLIt" @click="gokefu">{{$t('h_bottom.title[8]')}}</a>
								<a class="boxTopLIt" @click="godownloadapp">{{$t('h_bottom.title[9]')}}</a>
								<a class="boxTopLIt" @click="goAbout">{{$t('h_bottom.title[10]')}}</a>
								<!-- <a class="boxTopLIt">帮助中心</a>
								<a class="boxTopLIt">有奖反馈</a> -->
							</li>
						</ul>
						<div class="boxTopR">
							<div class="boxTopRImg">
								<div><img src="@/assets/images/yh/18+.d3bfc964e32f0f4fd680.png" alt="."
										data-status="success" class="boxTopRImgIt"
										></div>
								<div class="sJeL_Zz9iIrtSZ9J0Kht"><img
										src="@/assets/images/img/qq.png"
										alt="QQ" data-status="success" class="boxTopRImgIt"
										></div>
								<div class="sJeL_Zz9iIrtSZ9J0Kht"><img
										src="@/assets/images/img/wx.png"
										alt="Wechat" data-status="success" class="boxTopRImgIt"
										></div>
								<div class="sJeL_Zz9iIrtSZ9J0Kht"><img
										src="@/assets/images/img/pyq.png"
										alt="WeChat Moments" data-status="success" class="boxTopRImgIt"
										></div>
								<div class="sJeL_Zz9iIrtSZ9J0Kht"><img
										src="@/assets/images/img/facebook.png"
										alt="Facebook" data-status="success" class="boxTopRImgIt"
										></div>
								<div class="sJeL_Zz9iIrtSZ9J0Kht"><img
										src="@/assets/images/img/tg.png"
										alt="Telegram" data-status="success" class="boxTopRImgIt"
										></div>
								<div class="sJeL_Zz9iIrtSZ9J0Kht"><img
										src="@/assets/images/img/wa.png"
										alt="WhatsApp" data-status="success" class="boxTopRImgIt"
										></div>
								<div class="sJeL_Zz9iIrtSZ9J0Kht"><img
										src="@/assets/images/img/line.png"
										alt="Line" data-status="success" class="boxTopRImgIt"
										></div>
							</div>
							<!-- <div class="boxTopRText">
								拉斯维加斯是国际最知名的线上博彩运营公司，以前端科技提供无与伦比的真人、电子、体育、彩票，还有精彩纷呈的高质感创意游戏！拉斯维加斯持有曼岛政府OGRA(Online
								Gaming Regulation Act) 合法博彩娱乐公司牌照。
								诚信、专业及安全的平台，让您的生活充满健康的乐趣、刺激与成就。
							</div> -->
						</div>
					</div>
					<div class="boxCon">
						<img src="@/assets/images/img/1.png">
						<img src="@/assets/images/img/2.png">
						<img src="@/assets/images/img/3.png">
						<img src="@/assets/images/img/4.png">
						<img src="@/assets/images/img/5.png">
						<img src="@/assets/images/img/6.png">
						<img src="@/assets/images/img/7.png">
						<img src="@/assets/images/img/8.png">
					</div>
					<div class="boxBot">
						<p class="">{{$t('h_bottom.title[11]')}}</p>
					</div>
				</section>
			</div>
		</div>
		<newmanBox v-if="newmanb" ref="newmanBox"></newmanBox>
	</div>
</template>

<script>
	import newmanBox from './newmanBox.vue'
	export default {
		name: "Bottom",
		components: {
			newmanBox
		},
		props:{
			navIndex:{
				type:Number,
				default:0
			},
			navs:{
				type:Array,
				default:[]
			},
			changeNav:{
				type:Function,
			},
		},
		data() {
			return {
				newmanb:false
			};
		},
		methods: {
			golive(){
				this.$router.push('../../preferential/live')
			},
			openRenwU(){
				if(!this.newmanb){
					this.$parent.$parent.$parent.opennewmanbox()
				}else{
					this.$refs.newmanBox.openForget()
				}
			},
			goFanshui(){
				this.$router.push('../../preferential/preferential')
			},
			goreward(){
				this.$router.push('../../preferential/reward')
			},
			gopromotion(){
				this.$router.push('../../mine/promotion')
			},
			gokefu(){
				this.$router.push('/index/sevCus')
			},
			godownloadapp(){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				let that = this;
				this.$api.ConfigGetConfig({
					key: 'app_down_url',
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						window.open(res.data[0].value)
					} else {
						// this.$message.error(res.msg);
					}
				})
			},
			goAbout(){
				this.$router.push('../../mine/about')
			},
		}
	}
</script>

<style scoped>
	/* 底部 */
	.bottomBox{
		background: var(--theme-side-footer-bg-color);
		width: 100%;
		margin-top: 170px;
	}
	.bottomBoxOne{
		width: 74%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* align-items: center; */
	}
	.boxTop{
		display: flex;
		justify-content: space-between;
		padding: 20px 0px;
		box-sizing: border-box;
	}
	.boxTopL{
		display: flex;
		justify-content: space-between;
		font-size: 15px;
	}
	.boxTopL li{
		width: 176px;
		color: var(--theme-text-color-lighten);
	}
	.boxTopL h3{
		font-weight: 400;
		font-size: 15px;
		color: var(--theme-text-color);
		margin-bottom: 8px;
	}
	.boxTopL a{
		cursor: pointer;
		color: var(--theme-text-color-lighten);
		margin-bottom: 8px;
	}
	.boxTopL a:hover{
		color: var(--theme-primary-color);
	}
	.boxTopR{
		    width: 420px;
	}
	.boxTopRImg{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}
	.boxTopRImg img{
		width: 45px;
		height: 45px;
		margin: 0px 12px 12px 0px;
	}
	.boxTopRText{
		font-size: 13px;
		margin-top: 10px;
		color: var(--theme-text-color-lighten);
	}
	.boxCon{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.boxCon img{
		width: 85px;
		height:30px;
		margin: 10px 8px;
	}
	.boxCon img:nth-child(1),.boxCon img:nth-child(2),.boxCon img:nth-child(3){
		width: 95px;
		height:30px;
		margin: 10px 6px;
	}
	.boxBot{
		font-size: 13px;
		padding-bottom: 20px;
		box-sizing: border-box;
		text-align: center;
		color: var(--theme-text-color-lighten);
	}
</style>